<template>
	<view class="content" style="height: 100vh; display: flex;">
		<view class="gradient-bg">
			<view class="s-input-wrap">
				<view class="s-input-box flex-row">
					<input v-model="searchValue" :focus="focusState" class="s-input flex1" style="text-align: left;"
						placeholder="请输入或扫描物料编码" @confirm="stock" />
					<icon type="search" size="22" @click="stock" color="#4599AD" class="icon" />
				</view>
			</view>
			<scroll-view scroll-y class="content-list-card">
				<view style="margin: 0 0 16rpx 0;">
					<text class="gray-text">查询结果{{ tableData.length }}条</text>
					<!-- <text class="black-text-34" style="margin-left: 8rpx;">（{{tableData.length}}条）</text> -->
				</view>
				<view class="card" v-for="(item, index) in tableData" :key="index">
					<!-- <view class="item-header  flex-row-start" :class="item.status =='NORMAL'?'status1':'status2'">
					<image class="bar-icon" src="/static/images/bar_icon.png" mode="widthFix"></image>
					<view>
						<view style="font-size: 24rpx;">条码</view>
						<view class="code-text">{{item.batchNo}}</view>
					</view>
					<image v-if="item.status =='NORMAL'" class="status_icon" src="/static/images/status_icon1.png" mode="widthFix"></image>
					<image v-else class="status_icon" src="/static/images/status_icon2.png" mode="widthFix"></image>
					<image class="search-bg" src="/static/images/search_bg.png" mode="widthFix"></image>
				</view> -->
					<!--  :class="item.status =='NORMAL'?'status1':'status2'" -->
					<view class="title flex-row-between">
						<view class="flex-row">
							<text class="gray-text">托盘</text>
							<text class="black-text-34" style="margin-left: 8rpx;">{{ item.trayNo }}</text>
						</view>

						<view class="flex-row">
							<text class="gray-text">批次</text>
							<text class="black-text-34" style="margin-left: 8rpx;">{{ item.batchNo }}</text>
						</view>

						<text class="gray-text">{{ getStatustxt(item.status) }}</text>
						<!-- <uni-icons v-if="item.status =='NORMAL'" type="checkmarkempty" size="16" color="#fff" class="status_icon status_icon1"></uni-icons>
					<uni-icons v-else type="locked" size="16" color="#fff" class="status_icon status_icon2"></uni-icons> -->
						<!-- <image v-if="item.status =='NORMAL'" class="status_icon" src="/static/images/status_icon1.png" mode="widthFix"></image>
					<image v-else class="status_icon" src="/static/images/status_icon2.png" mode="widthFix"></image> -->
					</view>
					<view class="">
						<view class="flex-row split">
							<view class="content flex-column" style="width:50%">
								<view class="gray-text">物料编码</view>
								<view class="black-text-34">{{ item.productNo }}</view>
							</view>
							<!-- <view class="line"></view> -->
							<view class="content flex-column" style="width:50%">
								<view class="gray-text">物料名称</view>
								<view class="black-text-34">{{ item.productName }}</view>
							</view>
						</view>
						<view class="flex-row">
							<view class="content flex-column" style="width:50%">
								<view class="gray-text">库位编号</view>
								<view class="black-text-34">{{ item.storehouseLocationNo }}</view>
							</view>
							<view class="content flex-column" style="width:50%">
								<view class="gray-text">库存数量/单位</view>
								<view class="black-text-34">{{ item.qty }}/{{ item.company }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>

import { stock } from "./api"

export default {
	data() {
		return {
			searchValue: '',
			tableData: [],
			StockStatus: [],
			focusState: true
		}
	},
	onLoad: function () {
		this.getDicts("sh_stock_status").then(res => {
			this.StockStatus = res.data;
		});

	},

	onNavigationBarButtonTap(obj) {
		if (obj.text == '重置') {
			this.searchValue = '';
			this.tableData = [];
		}
	},
	methods: {
		getStatustxt(v) {
			let o = this.StockStatus.find(el => el.dictValue == v)
			return o && o.dictLabel
		},
		toPage(page) {
			this.$tab.navigateTo(page);
		},
		stock() {
			if(!this.searchValue){
				this.$modal.msg("请扫描物料")
				return
			}
			try {
				this.$modal.loading("加载中...")
				stock({ productNo: this.searchValue, pageNum: 0, pageSize: 10000 }).then(res => {
					this.$modal.closeLoading()
					this.tableData = res.rows
				})
			} catch (error) {
				this.$modal.closeLoading()
				//TODO handle the exception
			} finally{
				this.$modal.closeLoading()
				this.focusState = false
				setTimeout(()=>{
					this.$nextTick(() => {
						this.focusState = true
					})
				},500)
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
}

.status_icon {
	width: 56rpx;
	height: 56rpx;
	text-align: center;
	line-height: 56rpx;
	border-radius: 50%;
}

.status_icon1 {
	background-color: #3ECBBD;
}

.status_icon2 {
	background-color: #F96C56;
}

.status1 {
	background: linear-gradient(133deg, #4599AD 0%, #3ECBBD 100%) !important;
}

.status2 {
	background: linear-gradient(133deg, #F89861 0%, #F96C56 100%) !important;
}



.search-wrap {
	position: absolute;
	z-index: 2;
	width: 100vw;
	height: 152rpx;
	padding: 24rpx 48rpx;

	.input-item {
		padding: auto 24rpx;
		background-color: #F2F6F8;
		height: 88rpx;
		border-radius: 8rpx;

		.icon {
			font-size: 46rpx;
			margin-left: 20rpx;
			margin-right: 24rpx;
			color: #8997A8;
		}

		.input {
			width: 100%;
			font-size: 28rpx;
			line-height: 40rpx;
			text-align: left;
			padding-left: 24rpx;
		}

	}
}

.text-title {
	padding: 8rpx 0;
	font-size: 24rpx;
	color: #8997A8
}

.search-value-wrap {
	min-height: 300rpx;
	padding: 152rpx 24rpx 0;

	.item-wrap {
		width: 100%;
		// height: 357rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 12rpx rgba(85, 107, 133, 0.16);
		border-radius: 8rpx;
		overflow: hidden;
		margin-bottom: 16rpx;

		.item-header {
			padding: auto 36rpx auto 24rpx;
			position: relative;
			width: 100%;
			height: 118rpx;
			color: #fff;

			.search-bg {
				width: 100%;
				position: absolute;
				bottom: 0;
			}

			.bar-icon {
				width: 68rpx;
				height: 54rpx;
				margin-left: 24rpx;
				margin-right: 12rpx;
			}

			.code-text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.item-content {
			border-top: 1px solid rgba(85, 107, 133, 0.16);
		}

		.line {
			width: 1rpx;
			height: 80rpx;
			background-color: rgba(85, 107, 133, 0.16);
			margin: 16rpx 24rpx;
		}

		.text1 {
			font-size: 24rpx;
			color: #8997A8;
			padding-bottom: 8rpx;
		}

		.text2 {
			font-size: 30rpx;
			color: #0D1116;
		}

		.sub-item {
			flex: 1;
			padding: 0;
		}
	}
}

.gradient-bg{
	display: flex;
    flex-direction: column;
}
.content-list-card{
	flex: 1;
	height: calc(100% - 300rpx);
	overflow: auto;
}
</style>
